<template>
  <div class="app-container">
    <el-row :gutter="32" class="row-second">
      <el-col :span="12">
        <div class="main-top">
          <p class="top-title">当日资产卡销售额</p>
          <p class="top-today-total"><span>{{ rechargeTotal }}</span><span>/{{ profitPercent }}%</span></p>
          <div class="svg-container" @click="gotoSpecificPage(1)">
            <div class="bottom-container">
              <span class="usernum-text">总消费 </span>
              <span class="user-num">{{ rechargeTotalAll }}</span>
            </div>
            <svg-icon icon-class="right-arrow" class-name="top-arrow" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="main-bottom">
          <p class="top-title">当日流水统计</p>
          <!-- <p class="top-today-open-total">{{ findExpendAll }}</p> -->
          <p class="top-today-open-total">普通用户:{{ findExpendUser }} / 合作用户:{{ findExpendAll }}  </p>
          <span class="svg-container" @click="gotoSpecificPage(5)">
            <svg-icon icon-class="right-arrow" class-name="top-arrow" />
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32" class="row-second">
      <el-col :span="12">
        <div class="main-bottom">
          <p class="top-title">当日赠品总价</p>
          <p class="top-today-pick-total">{{ drawPriceTotal }}</p>
          <div class="svg-container" @click="gotoSpecificPage(2)">
            <div class="bottom-container">
              <span class="usernum-text">总提取价值 </span>
              <span class="user-num">{{ drawPriceTotalAll }}</span>
            </div>
            <svg-icon icon-class="right-arrow" class-name="top-arrow" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="main-bottom">
          <p class="top-title">当日积分消耗次数</p>
          <p class="top-today-open-total">{{ openBoxNum }}</p>
          <span class="svg-container" @click="gotoSpecificPage(3)">
            <svg-icon icon-class="right-arrow" class-name="top-arrow" />
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32" class="row-second">
      <el-col :span="12">
        <div class="left-bottom">
          <p class="top-title">总注册人数</p>
          <p class="top-user-total">{{ regTotal }}</p>
          <div class="svg-container" @click="gotoSpecificPage(4)">
            <div class="bottom-container">
              <span class="usernum-text">当日注册人数</span>
              <span class="user-num">{{ toDayRegNum }}</span>
            </div>
            <svg-icon icon-class="right-arrow" class-name="top-arrow" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right-bottom">
          <p class="top-title">当前在线人数</p>
          <p class="top-user-total">{{ onlineTotal }}</p>
          <div class="bottom-container">
            <span class="usernum-text">当前玩家在线人数</span>
            <span class="user-online-num">{{ onlineUser }}</span>
            <span class="usernum-text">当前主播在线人数</span>
            <span class="user-kol-num">{{ onlineFission }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getIndexData } from '@/api/dashboard/index'
export default {
  name: 'Dashboard',
  data() {
    return {
      rechargeTotal: 0, // 当日消费流水
      rechargeTotalAll: 0,
      profitPercent: 0,
      drawPriceTotalAll: 0,
      findExpendAll:0,// 当日结算流水
      drawPriceTotal: 0, // 当日取回总价值
      openBoxNum: 0, // 当日开箱总数
      regTotal: 0, // 注册总数
      toDayRegNum: 0, // 当日注册总数
      onlineTotal: 0, // 当前在线人数
      onlineUser: 0, // 当前玩家在线人数
      onlineFission: 0, // 当前主播在线人数
      findExpendUser:0, // 玩家流水
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  created() {
    this.getIndexData()
  },
  methods: {
    getIndexData() {
      getIndexData().then(res => {
        this.$log(res)
        const data = res.data
        this.rechargeTotal = data.rechargeTotal
        this.rechargeTotalAll = data.rechargeTotalAll
        this.profitPercent = data.profitPercent
        this.drawPriceTotal = data.drawPriceTotal
        this.drawPriceTotalAll = data.drawPriceTotalAll
        this.openBoxNum = data.openBoxNum
        this.findExpendAll = data.findExpendAll
        this.regTotal = data.regTotal
        this.toDayRegNum = data.toDayRegNum
        this.onlineTotal = data.onlineTotal
        this.onlineUser = data.onlineUser
        this.onlineFission = data.onlineFission
        this.findExpendUser = data.findExpendUser
      })
    },
    gotoSpecificPage(pageIndex) {
      switch (pageIndex) {
        case 1:
          this.$router.push({ path: '/rootdatamanager/userbehavior-data/playerBalanceManage/player-pay' })
          break
        case 2:
          this.$router.push({ path: '/rootdatamanager/userbehavior-data/playerpickmanager/player-pick' })
          break
        case 3:
          this.$router.push({ path: '/rootdatamanager/userbehavior-data/playerBalanceManage/player_balance_manage' })
          break
        case 4:
          this.$router.push({ path: '/rootuser/user-manager' })
          break
          case 5:
          this.$router.push({ path: '/rootdatamanager/userbehavior-data/playerBalanceManage/player_balance_manage' })
          break
        default:
          this.$router.push({ path: '/' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 32px;
  }
  .main-top {
    background-color: #ffffff;
    width: 100%;
    height: 278px;
    box-shadow: 0px 8px 40px 0px rgba(107, 107, 107, 0.1);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    .top-today-total{
      width: 100%;
      height: 34%;
      font-size: 34px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #14162E;
      line-height: 35px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .bottom-container{
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-right: 30px;
      padding-bottom: 15px;
    }
    .svg-container{
      width: 100%;
      height: 34%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding-right: 30px;
      padding-bottom: 15px;
      .top-arrow {
        width: 32px;
        height: 32px;
        &:hover{
          // fill: #1D143C;
          fill: #ff0000;
        }
      }
    }
  }
  .main-bottom {
    background-color: #ffffff;
    width: 100%;
    height: 278px;
    box-shadow: 0px 8px 40px 0px rgba(107, 107, 107, 0.1);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    .top-today-pick-total,.top-today-open-total,.top-user-total{
      width: 100%;
      height: 35%;
      font-size: 34px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #14162E;
      line-height: 35px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .svg-container{
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding-right: 30px;
      padding-bottom: 15px;
      .top-arrow {
        width: 32px;
        height: 32px;
        &:hover{
          // fill: #1D143C;
          fill: #ff0000;
        }
      }
    }
    .bottom-container{
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-right: 30px;
      padding-bottom: 15px;
    }
  }
  .left-bottom {
    background-color: #ffffff;
    width: 100%;
    height: 278px;
    box-shadow: 0px 8px 40px 0px rgba(107, 107, 107, 0.1);
    border-radius: 15px;
    display: flex;
    flex-direction: column;

    .top-today-pick-total,.top-today-open-total,.top-user-total{
      width: 100%;
      height: 35%;
      font-size: 34px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #14162E;
      line-height: 35px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .svg-container{
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-right: 30px;
      padding-bottom: 15px;
      position: relative;
      .top-arrow {
        width: 32px;
        height: 32px;
        position: absolute;
        right: 30px;
        &:hover{
          // fill: #1D143C;
          fill: #ff0000;
        }
      }
    }

  }
  .right-bottom {
    background-color: #ffffff;
    width: 100%;
    height: 278px;
    box-shadow: 0px 8px 40px 0px rgba(107, 107, 107, 0.1);
    border-radius: 15px;
    display: flex;
    flex-direction: column;

    .top-today-pick-total,.top-today-open-total,.top-user-total{
      width: 100%;
      height: 35%;
      font-size: 34px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #14162E;
      line-height: 35px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .bottom-container{
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-right: 30px;
      padding-bottom: 15px;
    }
  }
  .top-title {
      width: 100%;
      height: 25px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #14162E;
      line-height: 17px;
      margin-left: 30px;
      margin-top: 30px;
      padding-left: 10px;
      border-left: 4px solid #3b425d;
    }
  .usernum-text{
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #14162E;
    margin-right: 15px;
    margin-left: 40px;
  }
  .user-num,.user-online-num,.user-kol-num {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #14162E;
  }
  .row-second {
    margin: 32px 0px 32px 0px;
  }

</style>
